* {
  margin: 0;
  padding: 0;
}

img {
  display: block;
  width: 100%;
  height: 100%;
}

body {
  padding: 20px;
}

.box {
  position: relative;
  width: 350px;
  height: 350px;
  background: #cccccc url(https://img13.360buyimg.com/n1/jfs/t1/205713/9/10194/753629/6160064dEf1cf949c/ca0cf4fcf814018e.jpg.avif) no-repeat;
  background-size: cover;
}

.box .shade {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 200;
}

.box .see {
  position: absolute;
  width: 238px;
  height: 238px;
  background-color: rgba(255, 255, 0, 0.5);
  left: 0;
  top: 0;
}

.box .show {
  position: absolute;
  width: 350px;
  height: 350px;
  left: 400px;
  top: 0;
  background-color: greenyellow;
  background: #cccccc url(https://img13.360buyimg.com/n1/jfs/t1/205713/9/10194/753629/6160064dEf1cf949c/ca0cf4fcf814018e.jpg.avif) no-repeat;
  visibility: hidden;
}

.allItem {
  width: 350px;
  height: 54px;
  padding: 0 30px;
  box-sizing: border-box;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.allItem .item {
  width: 54px;
  height: 54px;
  box-sizing: border-box;
  border: 2px solid white;
  transition: 0.1s linear;
}

.allItem .item:hover {
  border-color: red;
}

.allItem .item.active {
  border-color: red;
}
